<template>
	<view>
		<u-navbar :is-back="true" title="套卷练习"></u-navbar>
		<view class="container">
			<scroll-view scroll-y class="menu">
				<view class="menu-list">
					<view v-for="(dictValue, name) in menuItems" :key="name" @click="handleQuery(dictValue[1])"
						class="menu-item" :class="{ active: selectedType === dictValue[1] }">
						{{ name }}
					</view>
				</view>
			</scroll-view>
			<view class="content">
				<view class="paper-count-container">
					<view class="paper-count">共有{{ sortedPapers.length }}套</view>
				</view>
				<view v-if="sortedPapers.length === 0" class="no-papers">
					暂时还没有试卷哦
				</view>
				<view v-for="paper in sortedPapers" :key="paper.id" class="paper-card" @click="gotoPaper(paper.id)">
					<view>{{ paper.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";
	import {
		allPapers
	} from "@/api/business/paper";

	export default {
		components: {
			UNavbar,
		},
		data() {
			return {
				menuItems: {
					'国考': ['国考', '1'],
					'国考模拟题': ['国考模拟题', '2'],
					'省考模拟题': ['省考模拟题', '3'],
					'安徽': ['安徽', '4'],
					'北京': ['北京', '5'],
					'福建': ['福建', '6'],
					'甘肃': ['甘肃', '7'],
					'广东': ['广东', '8'],
					'广西': ['广西', '9'],
					'贵州': ['贵州', '10'],
					'海南': ['海南', '11'],
					'河北': ['河北', '12'],
					'河南': ['河南', '13'],
					'黑龙江': ['黑龙江', '14'],
					'湖北': ['湖北', '15'],
					'湖南': ['湖南', '16'],
					'吉林': ['吉林', '17'],
					'江苏': ['江苏', '18'],
					'江西': ['江西', '19'],
					'辽宁': ['辽宁', '20'],
					'内蒙古': ['内蒙古', '21'],
					'宁夏': ['宁夏', '22'],
					'青海': ['青海', '23'],
					'山东': ['山东', '24'],
					'山西': ['山西', '25'],
					'陕西': ['陕西', '26'],
					'上海': ['上海', '27'],
					'四川': ['四川', '28'],
					'天津': ['天津', '29'],
					'西藏': ['西藏', '30'],
					'新疆': ['新疆', '31'],
					'云南': ['云南', '32'],
					'浙江': ['浙江', '33'],
					'重庆': ['重庆', '34'],
					'深圳市考': ['深圳市考', '35'],
					'广州市考': ['广州市考', '36'],
					'政法干警': ['政法干警', '37'],
					'选调': ['选调', '38'],
				},
				papers: [],
				selectedType: '',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					paperType: null,
				},
			};
		},
		created() {
			const firstKey = Object.keys(this.menuItems)[0];
			this.selectedType = this.menuItems[firstKey][1];
			this.fetchPaperList();
		},
		computed: {
			sortedPapers() {
				return (this.papers || []).filter(paper => paper.paperType == this.selectedType).sort((a, b) => b
					.paperYear - a.paperYear);
			},
		},
		methods: {
			fetchPaperList() {
				allPapers(this.queryParams).then(response => {
					this.papers = response.data || [];
				}).catch(error => {
					console.error("获取试卷数据失败", error);
				});
			},
			handleQuery(type) {
				this.selectedType = type;
				this.queryParams.paperType = type;
				this.fetchPaperList();
			},
			gotoPaper(paperId) {
			    this.navigateTo(`/subPackageA/paper?paperId=${paperId}`);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		height: 100vh;
	}

	.menu {
		width: 18%;
		border-right: 1px solid #e0e0e0;
	}

	.menu-list {
		padding: 0px;
	}

	.menu-item {
		padding: 10px;
		cursor: pointer;
		border-radius: 3px;
		transition: background 0.3s;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
	}

	.menu-item.active {
		background-color: #e0e0e0;
		font-weight: bold;
	}

	.content {
		flex: 1;
		padding: 20px;
		overflow-y: auto;
	}

	.paper-card {
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		background-color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.paper-count-container {
		position: sticky;
		top: 0;
		margin-bottom: 20px;
		font-size: 13px;
		font-weight: bold;
	}
</style>